<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <base href="<%=basePath%>">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>购物车页面</title>
    <link rel="stylesheet" href="render/css/frontend/common/base.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/common/shop_common.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_header.css" type="text/css"/>
    <link rel="stylesheet" href="render/css/frontend/shop_gouwuche.css" type="text/css"/>
<%--    <link rel="stylesheet" href="render/css/frontend/HFAlert.css">--%>

    <style type="text/css">
        .shop_bd_shdz_title {
            width: 1000px;
            margin-top: 10px;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            background-color: #F8F8F8;
        }

        .shop_bd_shdz_title h3 {
            width: 120px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: bold;
            background: #FFF;
            border: 1px solid #E8E8E8;
            border-radius: 4px 4px 0 0;
            float: left;
            position: relative;
            top: 10px;
            left: 10px;
            border-bottom: none;
        }

        .shop_bd_shdz_title p {
            float: right;
        }

        .shop_bd_shdz_title p a {
            margin: 0 8px;
            color: #555555;
        }

        .shop_bd_shdz_lists {
            width: 1000px;
        }

        .shop_bd_shdz_lists ul {
            width: 1000px;
        }

        .shop_bd_shdz_lists ul li {
            width: 980px;
            border-radius: 3px;
            margin: 5px 0;
            padding-left: 18px;
            line-height: 40px;
            height: 40px;
            border: 1px solid #FFE580;
            background-color: #FFF5CC;
        }

        .shop_bd_shdz_lists ul li label {
            color: #626A73;
            font-weight: bold;
        }

        .shop_bd_shdz_lists ul li label span {
            padding: 10px;
        }

        .shop_bd_shdz_lists ul li em {
            margin: 0 4px;
            color: #626A73;
        }

        .shop_bd_shdz {
            width: 1000px;
            margin: 10px auto 0;
        }

        .shop_bd_shdz_new {
            border: 1px solid #ccc;
            width: 998px;
        }

        .shop_bd_shdz_new div.title {
            width: 990px;
            padding-left: 8px;
            line-height: 35px;
            height: 35px;
            border-bottom: 1px solid #ccc;
            background-color: #F2F2F2;
            font-color: #656565;
            font-weight: bold;
            font-size: 14px;
        }

        .shdz_new_form {
            width: 980px;
            padding: 9px;
        }

        .shdz_new_form ul {
            width: 100%;
        }

        .shdz_new_form ul li {
            clear: both;
            width: 100%;
            padding: 5px 0;
            height: 25px;
            line-height: 25px;
        }

        .shdz_new_form ul li label {
            float: left;
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }

        .shdz_new_form ul li label span {
            color: #f00;
            font-weight: bold;
            font-size: 14px;
            position: relative;
            left: -3px;
            top: 2px;
        }

        span.deleteAddress {
            float: right;
            margin: 0 37px;
        }
    </style>

    <script type="text/javascript" src="render/js/jquery.min.js"></script>
</head>
<body>
<!-- Header Start -->
<jsp:include page="common/head.jsp"></jsp:include>

<!-- TopHeader Center -->
<jsp:include page="common/topheader_center.jsp"></jsp:include>
<!-- TopHeader Center End -->

<!-- Header Menu -->
<jsp:include page="common/header_menu.jsp"></jsp:include>
<!-- Header Menu End -->

<div class="shop_hd_breadcrumb">
    <strong>当前位置：</strong>
    <span>
            <a href="/">首页</a>&nbsp;›&nbsp;
            <a href="/render/myhome">个人中心</a>&nbsp;›&nbsp;
            <a href="javascript:void(0);">确认收货人资料及送货方式</a>
        </span>
</div>
<div class="clear"></div>
<form id="formaddess">
    <div class="shop_gwc_bd clearfix">
        <div class="shop_gwc_bd_contents clearfix">

            <!-- 购物流程导航 -->
            <div class="shop_gwc_bd_contents_lc clearfix">
                <ul>
                    <li class="step_a">确认购物清单</li>
                    <li class="step_b hover_b">确认收货人资料及送货方式</li>
                    <li class="step_c">购买完成</li>
                </ul>
            </div>
            <!-- 购物流程导航 End -->
            <div class="clear"></div>
            <!-- 收货地址 title -->
            <div class="shop_bd_shdz_title">
                <h3>收货人地址</h3>
                <p>
                    <a href="javascript:void(0);" id="new_add_shdz_btn">新增收货地址</a>
                    <a href="/render/address">管理收货地址</a>
                </p>
            </div>

            <!-- 收货人地址 Title End -->
            <div class="shop_bd_shdz clearfix">
                <div class="shop_bd_shdz_lists clearfix">
                    <ul id="address">
                    </ul>
                </div>
                <!-- 新增收货地址 -->
                <div id="new_add_shdz_contents" style="display:none;" class="shop_bd_shdz_new clearfix">
                    <div class="title">新增收货地址</div>
                    <form id="form_address">
                        <span style="visibility:hidden" class="user_id">${user.id}</span>
                        <div class="shdz_new_form">
                            <ul>
                                <li>
                                    <label><span>*</span>收货人姓名：</label>
                                    <input name="name" type="text" class="name" />
                                    <span><a style="color:red;">*</a>以数字或者字母开头并且位数在2-5位或者2-5位的中文</span>
                                </li>
                                <li>
                                    <label><span>*</span>所在地址：</label>
                                    省:<input name="province" class="province">
                                    市:<input name="city" class="city">
                                    区:<input name="area" class="area">
                                </li>
                                <li>
                                    <label><span>*</span>详细地址：</label>
                                    <input name="address" type="text"  class="xiangxi"/>
                                </li>
                                <li>
                                    <label><span></span>邮政编码：</label>
                                    <input type="text" name="code" class="youbian"/>
                                    <span><a style="color:red;">*</a>6位的数字</span>
                                </li>
                                <li>
                                    <label><span></span>电话：</label>
                                    <input type="text" name="phone" class="dianhua"/>
                                    <span><a style="color:red;">*</a>以13开头的总的位数为11位的数字</span>
                                </li>
                                <%--<li>
                                    <label><span></span>手机号：</label>
                                    <input name="telephone" type="text" class="shouji"/>
                                </li>--%>
                                <li>
                                    <label>&nbsp;</label>
                                    <input onclick="submitFormAddress()" type="button" value="增加收货地址"/>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
                <!-- 新增收货地址 End -->
            </div>
            <div class="clear"></div>
            <!-- 购物车列表 -->
            <div class="shop_bd_shdz_title">
                <h3>确认购物清单</h3>
            </div>
            <div class="clear"></div>

            <form class="createOrder_end">
                <table>
                    <thead>
                    <tr>
                        <th colspan="2"><span>商品</span></th>
                        <th><span>单价(元)</span></th>
                        <th><span>数量</span></th>
                        <th><span>小计</span></th>
                        <%--<th><span>操作</span></th>--%>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${cartItems}" var="entry">
                        <tr>
                            <td class="gwc_list_pic">
                                <a href="javascript:void(0);">
                                    <%--图片--%>
                                    <img style="width: 60px;height: 60px" src="${entry.product.main_image}"/>
                                </a>
                            </td>
                            <td class="gwc_list_title">
                                <%--名字--%>
                                <a href="javascript:void(0);">${entry.product.name}</a>
                            </td>
                            <td class="gwc_list_danjia">
                                <%--价格--%>
                                <span>￥<strong id="danjia_001">${entry.product.price}</strong></span>
                            </td>
                            <td class="gwc_list_shuliang">
                                <%--加减：传递给后台，保存在request\model--%>
                                <span>
                                    <span>${entry.quantity}</span>
                                </span>
                            </td>
                            <td class="gwc_list_xiaoji">
                                <%--总计--%>
                                <span>￥<strong id="xiaoji_001" class="good_xiaojis">${entry.quantity*entry.product.price}</strong></span>
                            </td>
                            <%--<td class="gwc_list_caozuo">
                                <a style="margin: 0px" href="javascript:void(0);">收藏</a>
                                <a style="margin-left: 5px" href="javascript:void(0);" class="shop_good_delete">删除</a>
                            </td>--%>
                        </tr>
                    </c:forEach>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="6">
                            <div class="gwc_foot_zongjia">
                                商品总价(不含运费)<span>￥<strong id="good_zongjia">${sum}</strong></span>
                            </div>
                            <div class="clear"></div>
                            <div class="gwc_foot_links">
                                <a href="/render/flow" class="go">返回购物车</a>
                                <a href="javascript:void(0);" onclick="confirmOrder()" class="op">确认订单</a>
                            </div>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </form>
            <!-- 购物车列表 End -->
        </div>
    </div>
    <!-- 购物车 Body End -->
    <a href="#" class="forward"></a>
</form>

<!-- Footer - wll -->
<jsp:include page="common/footer.jsp"></jsp:include>
<!-- Footer End -->
<%--<script type="text/javascript" src="render/js/frontend/jquery_goodnums.js"></script>--%>
<%--<script type="text/javascript" src="render/js/frontend/shop_gouwuche.js"></script>--%>
<%--<script type="text/javascript" src="https://cdn.bootcss.com/jquery.form/4.2.1/jquery.form.js"></script>--%>
<script type="text/javascript" src="render/js/jquery.form.js"></script>
<script type="text/javascript">
    var b=true;

    function getUrlParam(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r!=null) return unescape(r[2]); return null; //返回参数值
    }

    function submitFormAddress() {

        if ($(".name").val() == null||$(".name").val()=='') {
            HFalert({title: "名字不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".province").val() == null||$(".province").val()=='') {
            HFalert({title: "省份不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".city").val() == null||$(".city").val()=='') {
            HFalert({title: "城市不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".area").val() == null||$(".area").val()=='') {
            HFalert({title: "区域不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".xiangxi").val() == null||$(".xiangxi").val()=='') {
            HFalert({title: "详情不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".dianhua").val() == null||$(".dianhua").val()=='') {
            HFalert({title: "电话不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        if ($(".youbian").val() == null||$(".youbian").val()=='') {
            HFalert({title: "邮箱不能为空", type: 'success', confirmButtonText: '确定'});
            return;
        }
        
        /*匹配以数字或者字母开头并且位数在2-5位或者2-5位的中文*/
        var regName =  /(^[a-zA-Z0-9]{2,5}$)|(^[\u2E80-\u9FFF]{2,5}$)/;
        if(!regName.test($(".name").val())){
            HFalert({title:"名字输入不符合要求", type: 'warning', confirmButtonText: '确定'});
            return;
        }

        /*匹配位数为11位的数字*/
        var dianhua = /(^[0-9]{11,11}$)/;
        if(!dianhua.test($(".dianhua").val())){
            HFalert({title:"联系方式输入不符合要求", type: 'warning', confirmButtonText: '确定'});
            return;
        }

        var youbian= /[1-9]{1}(\d+){5}/;
        if(!youbian.test($(".youbian").val())){
            HFalert({title:"邮编输入不符合要求", type: 'warning', confirmButtonText: '确定'});
            return;
        }
        
        

        var url='/render/shipping/addressAdd';
        $.ajax({
            type: 'post',
            url: url,
            data:{
                'name':$(".name").val(),
                'province':$(".province").val(),
                'city':$(".city").val(),
                'area':$(".area").val(),
                'xiangxi':$(".xiangxi").val(),
                'youbian':$(".youbian").val(),
                'dianhua':$(".dianhua").val()
            },
            success: function (data) {
                if (data.success){
                    addressList($(".user_id").text());
                    $("#new_add_shdz_contents").hide(500);
                    b=true;
                    HFalert({title:data.message,type: 'success', confirmButtonText: '确定'});
                } else {
                    HFalert({title:data.message,type: 'warning', confirmButtonText: '确定'});
                }
            }
        });
    }

    $("#new_add_shdz_btn").click(function () {
        if (!b){
            $("#new_add_shdz_contents").hide(500);
            b=true;
        }else {
            $("#new_add_shdz_contents").show(500);
            b=false;
        }
    });

    var deleteUrl='/render/shipping/delete?id=';
    function addressList(id){
        $.ajax({
            type: 'post',
            url: "/render/shipping/addressList?id="+id,
            success: function (data) {

                var content = "";
                if (data.success){
                    $.each(data.message, function (i, n) {
                        if (i == 0) {
                            content += "<li><label>寄送至：<span><input name='did' type='radio' checked='checked' value='" + n.id + "'/></span></label><em>" + n.receiver_province + "</em><em>" + n.receiver_city + "市</em><em>" + n.receiver_address
                                + "区</em><em>" + n.receiver_district + "</em><em>" + n.receiver_name + "(收)</em><em>" + n.receiver_mobile + "</em>"
                                +"<span class='deleteAddress' onclick='deleteById(\"" + deleteUrl + n.id + "\"," + n.id + ")'>删除"+"</span></li>";
                        // <span onclick="deleteById(" \render\shipping\delete?id="34',34)'">删除</span>
                        //    onclick="deleteById('/render/shipping/delete?id=34',34);"
                        //    onClick 单引号+双引号：传参的转义问题
                        } else {
                            content += "<li class=\""+n.id+"\"><label>寄送至：<span><input name='did' type='radio' value='" + n.id + "'/></span></label><em>" + n.receiver_province + "</em><em>" + n.receiver_city + "市</em><em>" + n.receiver_address
                                + "区</em><em>" + n.receiver_district + "</em><em>" + n.receiver_name + "(收)</em><em>" + n.receiver_mobile + "</em>"
                                +"<span class='deleteAddress' onclick=\"deleteById('" + deleteUrl + n.id + "'," + n.id + ")\">删除"+"</span></li>"
                        }
                    });
                }
                $("#address").empty();
                $("#address").html(content);
            }
        }, "json");
    }

    addressList($(".user_id").text());
    function deleteById(url,id) {
        $.ajax({
            type: 'post',
            url: url,
            success: function (data) {
                if (data.success){
                    // addressList($(".user_id").text());
                    // $('#'+id).remove();
                    $('.'+id).remove();
                    HFalert({title:data.message,type: 'success', confirmButtonText: '确定'});
                } else {
                    HFalert({title:data.message,type: 'warning', confirmButtonText: '确定'});
                }
            }
        });
    }

    function confirmOrder() {
        /*存入order表：
        * 什么时候使用orderitem？
        * 获取商品信息-------获取选中的一个商品、数量、总计。。。 用户、商品、订单号
        * user_id;order_no;product_id;product_name;product_image;current_unit_price;total_price;
        * 插入
        * order_no-----时间戳
        * order------order_no;user_id;shipping_id;payment;payment_type;postage;
        * */
        HFconfirm({title:'确认支付？', type:'success', confirmButtonText: '确定', cancelButtonText: '取消', width: 400, callback:function () {
            if ($("input[name='did']:checked").val() == null || $("input[name='did']:checked").val() == '') {
                HFalert({title:"地址不能为空", type: 'warning', confirmButtonText: '确定'});
                return ;
            }
            var ciid='${ciid}';
            // console.log("ciid="+ciid);
            var url='/render/order/createOrder?address_id='+$("input[name='did']:checked").val()+'&ciid='+ciid+'&status='+20;
            // console.log("url="+url);
            $(".forward").attr('href',url);
            $(".forward")[0].click();
        },cancelCallback:function () {
            if ($("input[name='did']:checked").val() == null || $("input[name='did']:checked").val() == '') {
                HFalert({title:"地址不能为空", type: 'warning', confirmButtonText: '确定'});
                return ;
            }
            var ciid='${ciid}';
            var url='/render/order/createOrder?address_id='+$("input[name='did']:checked").val()+'&ciid='+ciid+'&status='+10;
            $(".forward").attr('href',url);
            $(".forward")[0].click();
        }});
    }
</script>